<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖动事件讲解</title>
    <style>
        .demo {
            list-style: none;
            background-color: aqua;
            height:  30px;
            width:150px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 图片和链接默认可以拖动  -->
    <!-- 被拖拽的源对象 -->
    <div class="demo" id="demo" draggable="true">测试</div> 

    <!-- 目标对象，容器 -->
    <div  id="wrapper"  style="width:300px;height:400px;border:1px solid #000">
    </div>
  
<script>
    //找到被拖拽的源对象
    var demo = document.getElementById('demo');
    // 目标对象，容器
    var wrapper = document.getElementById('wrapper');

    // demo.ondragstart = function(){
    //     console.log('用户开始拖动元素的时候触发');
    // }
    // demo.ondrag= function(){
    //     console.log('正在拖动时候触发');
    // }
    // demo.ondragend= function(){
    //     console.log('结束拖动时候触发');
    // }


    wrapper.addEventListener('dragenter',function(){
        console.log('dragenter 进入其容器范围内触发');
    })
    wrapper.addEventListener('dragover',function(ev){
        ev.preventDefault();
        console.log('dragover 被拖动的对象在另一对象容器范围内拖动');
    })
    wrapper.addEventListener('dragleave',function(){
        console.log('dragleave 拖动的对象离开其容器范围内时触发');

    })
    wrapper.addEventListener('drop',function(){
        console.log('drop 释放鼠标键时触发');
    })


</script>
   
</body>
</html>